<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基础语法3 v-bind</title>
  
    <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
    <div id="app">
        <h1>知识点1：html插值</h1>
            <h3>html插值可以动态的渲染DOM节点，常用来处理开发者不可预知和难以控制的DOM结构
                但它很容易形成漏洞被黑客攻击
            </h3>
            <span v-html="vh"></span>
        <h1>知识点2：v-pre</h1>
            <h3>v-pre 可以跳过其所在节点编译过程，可以利用它跳过没有指令语法和插值语法的节点，加快编译速度</h3>
            <span v-pre>{{price}}</span>
        <h1>知识点3：v-bind 属性绑定</h1>
            <h3>1.文本插值不能再html元素的属性中使用，如果想要动态的改变属性，可以使用v-bind</h3>
            <p>例子1:没有使用v-bind</p>
            <p title={{title}}>我没有进行属性绑定，请不要碰我！</p>
            <p>例子1:没有使用v-bind</p>
            <p v-bind:title="title">我进行属性绑定，请收下我动态调整的属性内容！</p>
            <h3>2.v-bind可以绑定变量，表达式，执行函数等</h3>
            <p>例子3:图片的动态绑定</p>
            <img v-bind:src="srcImg" alt="圆神和她的QB">
            <p>例子4K:绑定变量和表达式</p>
            <button :disabled="10+10==30">点击变成魔法少女</button>
            <h3>3.因为v-bind使用非常非常多，所以v-bind：可以简写为‘：’</h3>
            <p :title="title">我是简写的属性绑定</p>
            <h3>课堂实例：通过改变type值，来实现文本框，复选框和单选框的切换</h3>
            <input type="text">
            <input type="radio">
            <input type="checkbox">
            <h4>代码实现如下：</h4>
            <input :type="type">
            <button @click="change('text')">文本框</button>
            <button @click="change('radio')">单选框</button>
            <button @click="change('checkbox')">复选框</button>
            <h3>课堂小练习：通过动态改变属性，实现字体大小和颜色的改变</h3>
            <span :style="{color:color, fontSize:size+'px'}">随便写点东西</span>
            <button @click="changecolor('blue')">蓝色</button>
            <button @click="changecolor('pink')">粉色</button>
            <button @click="changecolor('yellow')">黄色</button>
            <button @click="changecolor('orange')">橙色</button>
            <button @click="add()">字体变大</button>
            <button @click="sub()">字体变  小</button>
            

    </div>

</body>
</html>

<script>
    const appConn =Vue.createApp({
        data() {
            return {
                vh:"<span style='color:red'>我是红色的</span>",
                Price:1000,
                title:'别碰我!!!!!!',
                srcImg:"./OIP-C.jpg",
                type:'text',
                size:'16',
                color:'red'
            }
        },
        methods: {
            change(val){
                this.type=val
            },
            changecolor(val){
                this.color=val
            },
            add(){
                this.size++
            },
            sub(){
                this.size--
            }
        },

    }).mount("#app")
</script>